<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        div.item{
            position: absolute;
            width: 200px;
            margin: 10px;
            transition: all 1s;
        }
        div#content{
            position: relative;

        }
        .part1{
            background-color: yellow;
            height: 200px;
        }
        .part2{
            background-color: #006ac1;
            height: 400px;
        }
        .part3{
            background-color: blueviolet;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="item part1">1</div>
        <div class="item part2">2</div>
        <div class="item part3">3</div>
        <div class="item part1">4</div>
        <div class="item part1">5</div>
        <div class="item part2">6</div>
        <div class="item part2">7</div>
        <div class="item part3">8</div>
        <div class="item part1">9</div>
        <div class="item part2">10</div>
        <div class="item part2">11</div>
        <div class="item part2">12</div>
        <div class="item part3">13</div>
        <div class="item part3">14</div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function waterFall() {
          var widthNum=parseInt($(window).width()/$(".item").outerWidth(true)),  //获取多列在窗口下的整数
          allHeight=[];           //创建一个空的数组
          for (var i=0;i<widthNum;i++){
              allHeight.push(0)     //将所有满足该宽度的块元素入栈
          }
          $(".item").each(function () {
            var $cur=$(this),
                indx=0,
            minAllHeight=allHeight[0];
            for (var j=0;j<allHeight.length;j++){
                if (allHeight[j]<minAllHeight){
                    minAllHeight=allHeight[j];
                    indx=j;
                }
            }
            $cur.css({
              "left":indx*$cur.outerWidth(true),
              "top":minAllHeight
            });
            allHeight[indx]=minAllHeight+$cur.outerHeight(true);
          })
        }
        waterFall();
        $(window).on("resize",function () {
            waterFall()
        })
    </script>
</body>
</html>

